$(() => {
  // 业务1：获取所有文章类别并渲染
  const getList = () => {
    $.ajax({
      type: 'GET', // 请求方式
      url: 'http://localhost:8080/api/v1' + '/admin/category/list', // 请求地址
      // 接口认证统一使用 Token 认证
      headers: {
        Authorization: localStorage.getItem('dsj_token'),
      },
      success: (res) => {
        console.log('成功响应回调', res)
        const htmlStr = template('moban', res)
        // console.log(htmlStr);
        $('tbody').html(htmlStr)
      },
    })
  }
  getList()

  // 业务2：新增类别
  $('.btn_opt').on('click', () => {
    // 2.1 获取类别数据和非空判断
    const name = $('#name').val().trim()
    const bieming = $('#slug').val().trim()
    if (name === '' || bieming === '') return alert('不能为空')
    // 2.2 发送 ajax 请求，实现添加类别
    $.ajax({
      type: 'POST', // 请求方式
      url: 'http://localhost:8080/api/v1' + '/admin/category/add', // 请求地址
      data: { name, slug: bieming }, // 请求参数
      // 接口认证统一使用 Token 认证
      headers: {
        Authorization: localStorage.getItem('dsj_token'),
      },
      success: (res) => {
        console.log('成功响应回调', res)
        // 情况1：成功
        if (res.code === 200) {
          // 1. 重新渲染列表
          getList()
          // 2. 关闭模态框 - 查BootStrap文档 - JavaScript插件 - 模态框 - 方法
          $('#myModal').modal('hide')
          // 3. 清空两个输入框
          $('#name').val('')
          $('#slug').val('')
        } else {
          // 情况2：失败 - 提示用户
          alert(res.msg)
        }
      },
    })
  })

  // 业务3：编辑类别
  let id = -1
  //   3.1：打开编辑模态框
  $('tbody').on('click', '.edit_btn', function () {
    // 打开编辑模态框
    $('#editModel').modal('show')
    // 获取按钮自己的 id
    id = $(this).data('id')
    // 根据 id 获取分类信息
    $.ajax({
      type: 'GET', // 请求方式
      url: 'http://localhost:8080/api/v1' + '/admin/category/search', // 请求地址
      // 接口认证统一使用 Token 认证
      headers: {
        Authorization: localStorage.getItem('dsj_token'),
      },
      data: { id }, // 请求参数
      success: (res) => {
        // console.log('成功响应回调', res)
        // 渲染类别数据
        const obj = res.data[0]
        $('#edit_name').val(obj.name)
        $('#edit_slug').val(obj.slug)
      },
    })
  })

  //   3.2：完成编辑业务 - 🎯事件直接是同级的，不要出现嵌套
  $('#editModel .btn_edit').on('click', () => {
    // 获取表单数据，非空判断
    const name = $('#edit_name').val().trim()
    const slug = $('#edit_slug').val().trim()
    if (name === '' || slug === '') return alert('不能为空')
    // console.log({ name, slug, id })
    $.ajax({
      type: 'POST', // 请求方式
      url: 'http://localhost:8080/api/v1' + '/admin/category/edit', // 请求地址
      data: { name, slug, id }, // 请求参数
      // 接口认证统一使用 Token 认证
      headers: {
        Authorization: localStorage.getItem('dsj_token'),
      },
      success: (res) => {
        // console.log('成功响应回调', res)
        if (res.code === 200) {
          // 重新渲染列表
          getList()
          // 关闭模态框
          $('#editModel').modal('hide')
        } else {
          alert(res.msg)
        }
      },
    })
  })

  // 业务4：删除类别
  $('tbody').on('click', '.btn_del', function () {
    //  业务升级，删除需要二次确认(layer询问框实现)
    // http://layui-doc.pearadmin.com/doc/modules/layer.html#layer.msg
    layer.confirm(
      '是否删除?',
      { icon: 3, title: '温馨提示' },
      // 💥把 function 改成箭头函数
      (index) => {
        // 获取id
        const id = $(this).data('id')
        // console.log(id)
        $.ajax({
          type: 'POST', // 请求方式
          url: 'http://localhost:8080/api/v1' + '/admin/category/delete', // 请求地址
          // 接口认证统一使用 Token 认证
          headers: {
            Authorization: localStorage.getItem('dsj_token'),
          },
          data: { id }, // 请求参数
          success: (res) => {
            console.log('成功响应回调', res)
            getList()
          },
        })
        // 完成业务后，自动管理弹出框
        layer.close(index)
      },
    )
  })
})
